<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>登陆</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    {load href="__STATIC__/global/bootstrap/css/bootstrap.min.css" /}
    {load href="__STATIC__/global/bootstrap/css/font-awesome.min.css" /}
    {load href="__STATIC__/global/Amaranjs/amaran.min.css" /}
    {load href="__STATIC__/system/dist/css/AdminLTE.min.css" /}
    <style>
        .login_top{
            display: flex;
            height: 95px;
            background: #217CA7;
            justify-content: center;
        }
        .login_content{
            height: 100%;
        }
        .top_content{
            display: flex;
            width: 1200px;
            height: 100%;
            align-items: center;
        }
        .top_content .logo_img img{
            width: 230px;
            height: 58px;
        }
        .top_content .top_info{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin-left: 25px;
            padding-left: 25px;
            height: 58px;
            border-left: 1px solid #60A0BF;
        }
        .top_content .top_info p{
            color: #fff;
            font-size: 24px;
            margin: 0;
        }
        .top_content .top_info span{
            color: #9CC4D7; 
            font-size: 16px;
        }
        .top_content .top_right{
            margin-left: auto;
            border: none;
            text-align: right;
        }
        .login_center{
            display: inline-block;
            position: relative;
            width: 100%;
            height: 100%;
            height: calc(100% - 95px);
        }
        .login_center .login-box-body{
            width: 530px;
            height: 410px;
            margin: 50px auto;
            margin-bottom: 0px;
            padding: 0 60px;
            border: 1px solid #C8E7F4;
            border-radius: 15px;
        }
        .login_center .login_title{
            margin-top: 20px;
            margin-bottom: 20px;
            font-size: 32px;
            font-weight: bold;
            text-align: center;
        }
        .login_center .btn-primary{
            font-size: 28px;
            border-radius: 5px;
            height: 60px;
            line-height: 60px;
            padding: 0;
        }
        .login_center .forget_tips{
            text-align: right;
            margin: 15px 0;
            color: #ccc;
            font-size: 15px;
            padding-right: 10px;
        }
        .login_center .form-control{
            height: 45px;
            line-height: 45px;
            padding: 0 10px;
            font-size: 18px!important;
        }
        .login_center .form-group{
            margin-bottom: 20px;
        }
        .form-control-feedback.fa {
            line-height: 45px;
        }
        #send_code{
            height: 39px;
            line-height: 39px;
            margin-top: 3px;
            font-size: 18px;
            padding: 0 15px;
            border-radius: 10px;
            letter-spacing: 2px;
            float: right;
        }
        .login_center input:-webkit-autofill { 
            -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
        }
        .footer_beian{
            width: 100%;
            position: absolute; 
            bottom: 15px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="login_content">
        <div class="login_top">
            <div class="top_content">
                <div class="logo_img"><a href="http://www.ttyjf.com"><img src="__STATIC__/web/logo2@2x.png" alt=""></a></div>
                <div class="top_info">
                    <p>天天云积分制管理平台</p>
                    <span> 轻松管理  快乐工作</span>
                </div>
                <div class="top_info top_right">
                    <span>全国统一服务热线</span>
                    <p>400-885-0819</p>
                </div>
            </div>
        </div>
        <div class="login_center" style="background: url('__STATIC__/web/login_bg.jpg')">
            <div class="login-box-body">
                <form action="{:url('User/check_login')}" method="POST" onsubmit="return false" >
                    <div class="login_title">总平台登录</div>
                    <div class="form-group has-feedback">
                        <input type="text" class="form-control" name="mobile" placeholder="手机" id="mobile">
                        <span class="glyphicon form-control-feedback fa fa-user fa-lg"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" class="form-control" name="password" placeholder="密码">
                        <span class="glyphicon form-control-feedback fa fa-lock fa-lg"></span>
                    </div>
                    <div class="row form-group">
                        <div class="col-xs-7">
                            <input class="form-control" name="code" placeholder="验证码" autocomplete="off">
                        </div>
                        <div class="col-xs-5">
                            <!--<img src="{:captcha_src()}" id="code" alt="captcha" onclick="this.src='{:captcha_src()}?rnd=' + Math.random();" />-->
                            <button type="button" class="btn btn-primary" id = "send_code">获取手机验证码 </button>
                        </div>
                    </div>
                    
                    <div class="forget_tips"><a href="{:url('user/forget_pas')}">忘记密码</a></div>
                    <button type="submit" class="btn btn-primary btn-block btn-flat login" data-loading-text="&lt;i class='fa fa-spinner fa-spin '&gt;&lt;/i&gt; 登入">登  录</button>
                </form>
            </div>
            <div class="footer_beian"><a href="http://beian.miit.gov.cn">粤ICP备19064262号 </a>天天云积分（中山）科技有限公司  版权所有</div>
        </div>
    </div>

    {load href="__STATIC__/global/jQuery/jquery-2.2.3.min.js" /}
    {load href="__STATIC__/global/bootstrap/js/bootstrap.min.js" /}
    {load href="__STATIC__/global/jQuery/jquery.form.js" /}
    {load href="__STATIC__/global/jQuery-gDialog/animate.min.css" /}
    {load href="__STATIC__/global/Amaranjs/jquery.amaran.min.js" /}
    {load href="__STATIC__/system/dist/js/login.js" /}

    <script>
        $('#send_code').on('click',function () {
            var mobile = $('#mobile').val();
            if(mobile == ''){
                $.amaran({'message':'请输入手机号'});
                return false;
            }else{
                if(!(/^1[3456789]\d{9}$/.test(mobile))){
                    $.amaran({'message':'请输入正确的手机号'});
                    return false;
                }
            }
            //发送验证码
            $.ajax({
                url:"{:url('user/send_code')}",
                data:{'mobile':mobile},
                success:function (res) {
                    if(res.code == 0){
                        // $(this).html();
                        $('#send_code').css("pointer-events","none");
                        var time = 60;
                        var set = setInterval(function () {
                            $('#send_code').html("(" + --time + ")秒后重新获取");
                        }, 1000);
                        setTimeout(function () {
                            $('#send_code').css("pointer-events","auto").html("重新获取验证码");
                            clearInterval(set);
                        }, 60000);
                    }
                    // console.log(res);
                    $.amaran({'message':res.msg});

                }
            })
            return false;
        })
    </script>

</body>
</html>
